<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
</head>

<body>
    <button>发送</button>

    <script>
        let btn = document.querySelector('button')
        btn.addEventListener('click', throttle(fn, 1000))
        function fn(e) {
            console.log(e.target.innerHTML)
        }

        function throttle(fn, time) {
            let last, t;  // 初始化定时器
            return function () {
                let args = arguments
                // 获取当前触发时间
                let now = +new Date() 

                // 若当前时间 - 上次时间 < time，说明需要清除定时器，因为只需要在指定时间内触发一次即可。
                if (last && now - last < time) {
                    clearTimeout(t)
                    t = setTimeout(() => {
                        // 将本次触发时间赋值给last，以便后续的时间比较
                        last = now
                        fn.apply(this, args)
                    }, time);
                } else {
                    // 若当前时间 - 上次时间 > time，说明超过了指定时间，需要触发一次函数。
                    last = now
                    fn.apply(this, args)
                }

            }
        }
    </script>
</body>

</html>